<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面未找到 - 数智学习</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body class="bg-gradient-to-br from-purple-900 via-indigo-800 to-blue-900 text-white min-h-screen">
    <header class="backdrop-blur-md bg-opacity-30 bg-gray-900 fixed w-full z-50">
        <nav class="container mx-auto px-6 py-4">
            <div class="flex items-center justify-between">
                <div class="logo flex items-center">
                    <img src="/images/logo.svg" alt="数智学习" class="h-8 w-8 mr-2">
                    <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">数智学习</span>
                </div>
                
                <button class="md:hidden text-white hover:text-blue-400 transition-colors" id="mobile-menu-button" aria-label="打开菜单">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>

                <ul class="nav-links hidden md:flex space-x-8" id="nav-menu">
                    <li><a href="/" class="hover:text-blue-400 transition-colors">首页</a></li>
                    <li><a href="/pages/overview/experience.html" class="hover:text-blue-400 transition-colors">学习内容</a></li>
                    <li><a href="/pages/overview/methods.html" class="hover:text-blue-400 transition-colors">学习方法</a></li>
                    <li><a href="/pages/notes.html" class="hover:text-blue-400 transition-colors">学习笔记</a></li>
                    <li><a href="/pages/overview/thoughts.html" class="hover:text-blue-400 transition-colors">心得感悟</a></li>
                </ul>
            </div>

            <div class="mobile-menu hidden md:hidden mt-4 bg-gray-900/80 rounded-lg p-4" id="mobile-menu">
                <ul class="space-y-4">
                    <li><a href="/" class="block hover:text-blue-400 transition-colors">首页</a></li>
                    <li><a href="/pages/overview/experience.html" class="block hover:text-blue-400 transition-colors">学习内容</a></li>
                    <li><a href="/pages/overview/methods.html" class="block hover:text-blue-400 transition-colors">学习方法</a></li>
                    <li><a href="/pages/notes.html" class="block hover:text-blue-400 transition-colors">学习笔记</a></li>
                    <li><a href="/pages/overview/thoughts.html" class="block hover:text-blue-400 transition-colors">心得感悟</a></li>
                </ul>
            </div>
        </nav>
    </header>

    <main class="pt-24">
        <div class="container mx-auto px-6 py-12 text-center">
            <div class="backdrop-blur-md bg-white bg-opacity-5 rounded-xl p-12 max-w-2xl mx-auto">
                <div class="animate__animated animate__fadeIn">
                    <svg class="w-32 h-32 mx-auto mb-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M12 12h.01M12 12h.01M12 12h.01M12 12h.01M12 12h.01M12 12h.01M12 12h.01M12 12h.01M12 12h.01M12 12h.01M12 12h.01M12 12h.01M12 12h.01M12 12h.01M12 12h.01M12 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">404</h1>
                    <h2 class="text-2xl font-bold mb-8 text-gray-300">页面未找到</h2>
                    <p class="text-gray-300 mb-8">抱歉，您访问的页面可能已被移动或不存在</p>
                    <a href="index.html" class="inline-flex items-center px-6 py-3 bg-blue-500 hover:bg-blue-600 rounded-full transition-colors">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                        </svg>
                        返回首页
                    </a>
                </div>
            </div>
        </div>
    </main>

    <footer class="container mx-auto px-6 py-8 text-center text-gray-400">
        <p class="mb-2">&copy; 2024 数智学习. All rights reserved.</p>
        <p><a href="https://beian.miit.gov.cn/" target="_blank" class="hover:text-blue-400 transition-colors">晋ICP备20000773号-3</a></p>
    </footer>
    <script src="/js/effects.js"></script>
    <script>
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');

        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
    </script>
</body>
</html>
